<template>
    <div class="UserSettingBG">
        <div class="UserSettingTittle">
            <div>
                <el-input v-model="userInput" :prefix-icon="Search" class="el_input" placeholder="请输入用户名"></el-input>
                <el-button @click="getUserList" class="el_button_primary" type="primary">查询</el-button>
            </div>
            <div>
                <el-button @click="delUserList" :icon="Delete" class="el_button_danger" type="danger">删除选中内容</el-button>
                <el-button @click="userInput = ''; getUserList()" :icon="Refresh" class="el_button_primary"
                    type="primary">&nbsp;&nbsp;刷新列表&nbsp;&nbsp;</el-button>
                <el-button @click="openCreateDialog" :icon="Plus" class="el_button_success"
                    type="success">&nbsp;&nbsp;添加用户&nbsp;&nbsp;</el-button>
            </div>
        </div>
        <div class="UserSettingContent">
            <el-table @selection-change="changeDelGoal" class="el_table" :data="UsersList" stripe table-layout="fixed">
                <el-table-column type="selection" width="55" />
                <el-table-column min-width="30" prop="id" align="center" label="用户id" />
                <el-table-column min-width="50" prop="name" align="center" label="用户名" />
                <el-table-column min-width="50" prop="password" align="center" label="用户密码" />
                <el-table-column min-width="50" prop="role[name]" align="center" label="用户角色" />
                <el-table-column min-width="50" prop="address" align="center" label="用户地址" />
                <el-table-column sortable="" min-width="50" prop="updateTime" align="center" label="更新时间" />
                <el-table-column min-width="50" align="center" label="操作">
                    <template #default="scope">
                        <div style="display: flex; gap: 10px; justify-content: center;">
                            <el-button :icon="Delete" circle @click="delUserListID = scope.row.id; delUserList()"
                                class="el_button_danger" type="danger">
                            </el-button>
                            <el-button :icon="Edit" circle style="margin-left: 0;" @click="openChangeDialog(scope.row)"
                                class="el_button_primary" type="primary">
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="UserSettingFooter">
            <el-pagination @change="changePage" class="el_pagination" :default-page-size="NowLength"
                :page-sizes="PageSize" layout="total, sizes, prev, pager, next, jumper" :total="SumLength" />
        </div>
    </div>
    <el-dialog @close="closeCreateDialog" title="新建用户" class="el_dialog" v-model="createFlag" width="500" align-center>
        <div class="createDialog">
            <p class="createAddressTip">用户地址:</p>
            <div class="createAddressBorder">
                <el-icon @click="getAddress">
                    <Refresh />
                </el-icon>
                <p class="createAddressP"> {{ createAddress }}</p>
            </div>
            <el-input v-model="createName" :prefix-icon="User" class="el_input" placeholder="请输入用户名"></el-input>
            <el-input v-model="createPasswd" :prefix-icon="Lock" class="el_input" placeholder="请输入用户密码"></el-input>
            <div class="createAddressButton">
                <el-button type="danger" class="el_button_danger" @click="closeCreateDialog">取消</el-button>
                <el-button type="primary" class="el_button_primary" @click="createUser">确定</el-button>
            </div>
        </div>
    </el-dialog>
    <el-dialog @close="closeChangeDialog" title="修改用户" class="el_dialog" v-model="changeFlag" width="500" align-center>
        <div class="changeBorder">
            <el-input v-model="changeName" :prefix-icon="User" class="el_input" placeholder="请输入用户名"></el-input>
            <el-input v-model="changePasswd" :prefix-icon="Lock" class="el_input" placeholder="请输入用户密码"></el-input>
            <div class="changeButton">
                <el-button type="danger" class="el_button_danger" @click="closeChangeDialog">取消</el-button>
                <el-button type="primary" class="el_button_primary" @click="changeUser">确定</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script setup lang='js' name=''>
import createUserAPI from '@/api/main/UserSetting/createUser';
import createUserAddressAPI from '@/api/main/UserSetting/createUserAddress';
import getAllUsersAPI from '@/api/main/UserSetting/getAllUsers';
import changeUserAPI from '@/api/main/UserSetting/changeUser';
import delUsersAPI from '@/api/main/UserSetting/delUsers';
import { Search, Delete, Refresh, Edit, Plus, User, Lock } from '@element-plus/icons-vue'
import showMessage from '@/utils/showMessage';
import { ref } from 'vue';
import { CheckInput } from '@/utils/checkUserInput';

// 用户列表
const UsersList = ref([])
// 总条数
const SumLength = ref(0)
// 模糊查询内容
const userInput = ref('')
// 分页控制
const PageSize = [20, 50, 100, 150, 200]
const NowLength = ref(20)
const NowIndex = ref(1)

// dialog
const createFlag = ref(false)
const createName = ref("")
const createPasswd = ref("")
const createAddress = ref("")

const changeFlag = ref(false)
const changeId = ref("")
const changeName = ref("")
const changePasswd = ref("")

// 创建账号
function openCreateDialog() {
    createFlag.value = true
    getAddress()
}
function closeCreateDialog() {
    createFlag.value = false
    createName.value = ""
    createPasswd.value = ""
    createAddress.value = ""
}
async function getAddress() {
    const res = await createUserAddressAPI()
    if (res.data.code == 200) {
        createAddress.value = res.data.data
    } else {
        showMessage("获取新地址失败")
        console.log(res)
    }
}
async function createUser() {
    if (CheckInput(createName.value, "请输入用户名")) {
        if (CheckInput(createPasswd.value, "请输入密码")) {
            const res = await createUserAPI(createName.value, createAddress.value, createPasswd.value)
            console.log(res)
            if (res.data.code == 200) {
                showMessage("注册成功", "success")
                closeCreateDialog()
                getUserList()
            }
        }
    }
}

function openChangeDialog(e) {
    changeFlag.value = true
    changeId.value = e.id
    changeName.value = e.name
    changePasswd.value = e.password
}
function closeChangeDialog() {
    changeFlag.value = false
    changeId.value = ""
    changeName.value = ""
    changePasswd.value = ""
}
async function changeUser() {
    if (CheckInput(changeName.value, "请输入用户名")) {
        if (CheckInput(changePasswd.value, "请输入密码")) {
            const res = await changeUserAPI(changeId.value, changeName.value, changePasswd.value)
            console.log(res)
            if (res.data.code == 200) {
                showMessage("修改成功", "success")
                closeChangeDialog()
                getUserList()
            }
        }
    }
}

// 分页检测
function changePage(a, b) {
    NowIndex.value = a
    NowLength.value = b
    getUserList()
}

// 获取用户列表
async function getUserList() {
    UsersList.value = []
    const res = await getAllUsersAPI(NowIndex.value - 1, NowLength.value, userInput.value)
    showMessage("加载成功", "success")
    UsersList.value = res.data.data
    for (let i = 0; i < 100; i++) {
        UsersList.value.push(UsersList.value[0])
    }
    SumLength.value = res.data.count
}
getUserList()

// 删除对话列表内容
const delUserListID = ref("")
function changeDelGoal(e) {
    let mess = ""
    e.forEach(element => {
        mess = mess + element.id + ","
    });
    mess.slice(0, -1)
    delUserListID.value = mess.slice(0, -1)
}

// 删除对话列表
async function delUserList() {
    if (delUserListID.value != "") {
        const res = await delUsersAPI(delUserListID.value)
        showMessage("删除用户成功", "success")
        getUserList()
    } else {
        showMessage("未选中任何用户")
    }
}
</script>

<style scoped>
/* 主体框架 */
.UserSettingBG {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.UserSettingBG>*:nth-child(2) {
    flex: 1;
}

/* 头部 */
.UserSettingTittle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 10px;
}

.UserSettingTittle>* {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* 内容 */
.UserSettingContent {
    position: relative;
}

.UserSettingContent>* {
    width: 100%;
    height: 100%;
    position: absolute;
}

/* 底部 */
.UserSettingFooter {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.createDialog {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.createDialog>div {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.createAddressButton>* {
    width: 100%;
}

.createAddressBorder {
    display: flex;
    flex-direction: row;
}

.createAddressBorder>*:nth-child(1) {
    width: 40px;
    height: 40px;
    background: var(--PuserSettingBG);
    color: var(--PuserSettingColor);
    border-radius: 5px;
}

.createAddressP {
    flex: 1;
    color: var(--PuserSettingColor);
    font-size: 16px;
    text-align: center;
    padding: 10px;
    background: var(--PuserSettingBG);
    border-radius: 5px;
}

.createAddressTip {
    color: var(--PuserSettingColor);
}

.changeBorder {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.changeButton {
    display: flex;
    gap: 10px;
    flex-direction: row;
}

.changeButton>* {
    flex: 1;
}
</style>